<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 定义气球类
    function Balloon(img) {
        // 创建字符数组
        this.arr = 'abcdefghigklmnopqrstuvwxyz'.split('');
        // 定义随机索引值
        this.idx = parseInt(Math.random() * this.arr.length);
        // 定义具体的字符
        this.str = this.arr[this.idx];

        // 创建dom元素
        this.dom = document.createElement('div');
        // 定义宽度属性
        this.width = parseInt(img.width / 4);
        // 定义高度属性
        this.height = parseInt(img.height / 3);
        // 定义随机x值
        this.positionX = parseInt(Math.random() * 4);
        // 定义随机y值
        this.positionY = parseInt(Math.random() * 3);

        // 定义设置样式的方法
        this.setStyle = function() {
            // 设置容器的宽高
            this.dom.style.width = this.width + 'px';
            this.dom.style.height = this.height + 'px';

            // 设置元素的定位
            this.dom.style.position = 'absolute';
            this.dom.style.left = 0;
            // this.dom.style.top = 0;
            // 随机top值
            this.dom.style.top = parseInt((document.documentElement.clientHeight - this.height) * Math.random()) + 'px';

            // 设置随机字符 （设置内部文本）
            this.dom.innerHTML = this.str;
            // 设置文字水平居中
            this.dom.style.textAlign = 'center';
            // 垂直居中
            this.dom.style.lineHeight = this.height * 2 / 3+ 'px';
            // 设置字体加粗
            this.dom.style.fontWeight = 'bold';
            this.dom.style.fontSize = '20px';

            
            // 设置背景图片
            this.dom.style.backgroundImage = 'url('+ img.src +')';
            // 设置背景图片定位
            this.dom.style.backgroundPositionX = -this.width * this.positionX + 'px';
            this.dom.style.backgroundPositionY = -this.height * this.positionY + 'px';
        }
        

        // 检测气球是否到达边界
        this.checkBalloon = function() {
            // 判断容器的定位值
            if (this.dom.offsetLeft >= document.documentElement.clientWidth - this.width) {
                // console.log('到达边界了');
                this.dom.style.left = document.documentElement.clientWidth - this.width + 'px';
                // 返回值 返回true
                return true;
            }
            // 返回false
            return false;
        }

        // 爆炸方法 （下树）
        this.boom = function() {
            document.body.removeChild(this.dom);   
        }


        // 设置上树的方法
        this.upTree = function() {
            document.body.appendChild(this.dom);
        }

        // 定义气球移动的方法
        this.move = function() {
            this.dom.style.left = this.dom.offsetLeft + 5 + 'px';
        }


        // 初始化方法
        this.init = function() {
            // 调用设置样式的方法
            this.setStyle();
            // 调用上树的方法
            this.upTree();
        }


        // 执行初始化方法
        this.init();
    }


    // 初始化变量
    var b = null;
    var timer = null;
    // 定义计数器
    var count = 0;

    // 定义数组 存储所有的气球实例
    var arr = [];

    // 创建图片元素
    var img = document.createElement('img');
    // 设置路径
    img.src = './images/balloon.jpg';



    // 设置load事件 
    img.onload = function() {
        // 实例化气球类
        b = new Balloon(this);
        // 存储到数组中
        arr.push(b);

        // 赋值定时器
        timer = setInterval(function() {
            // 改变计数器
            count++;
           
            // 每间隔50次创建一个气球
            if (count % 55 === 0) {
                // 每创建一个气球要放入数组一个
                arr.push(new Balloon(img));
            }

            // 遍历数组
            for (var i = 0; i < arr.length; i++) {
                // 移动气球
                arr[i].move();
                
              
                // 检测是否到达边界
                var result = arr[i].checkBalloon();


                // 判断result
                if (result) {
                    // 下树
                    arr[i].boom();
                    
                    // 说明到达边界了 移除对应的气球
                    arr.splice(
                        // 操作的位置
                        i,
                        // 删除的个数
                        1
                    ),
                    // 为了防止数组塌陷 修正索引值
                    i--;

                }
            }

        }, 20)
    }


    // 为document绑定键盘事件 
    document.onkeydown = function(e) {
        // 获取对应的字符
        var key = e.key;

        // 拿着这个key 与数组中气球实例的str进行匹配  如果匹配上 移除并下树
        for (var i = arr.length - 1; i >= 0; i--) {
            // 判断并找到对应的str
            if (key === arr[i].str) {
                // 先爆炸
                arr[i].boom();
                // 再从数组中移除
                arr.splice(i, 1);
                
            }
        }
    }


    </script>
</body>
</html>